<template>
  <div class="login-container w-full h-full flex_aic_jcc">
    <div class="top-left-container">
      <div class="top-left-title">Mira 智慧餐饮</div>
      <div class="top-left-subtitle">智能系统，技术赋能让餐饮更省心省力</div>
    </div>
    <div class="login-right">
      <div class="login-box">
        <div class="right_bg">
          <div class="login_title mb20 nowrap">
            {{ $t("login.平台管理中心") }}
          </div>
          <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="formData"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item prop="username" class="mt20">
              <el-input
                v-model="formData.username"
                class="login_input"
                style="width: 420px"
                :placeholder="$t('login.请输入用户名')"
              >
                <template #prefix>
                  <img src="@/assets/images/login/user.png" alt="" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" class="mt20">
              <el-input
                v-model="formData.password"
                type="password"
                class="login_input"
                style="width: 420px"
                :placeholder="$t('login.请输入密码')"
              >
                <template #prefix>
                  <img src="@/assets/images/login/psw.png" alt="" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code" class="mt20">
              <div class="flex_aic">
                <el-input
                  v-model="formData.code"
                  class="login_input flex1"
                  style="width: 420px"
                  :placeholder="$t('login.请输入验证码')"
                >
                  <template #prefix>
                    <img src="@/assets/images/login/code.png" alt="" />
                  </template>
                  <template #append>
                    <div @click="getAuthCode" class="login_code_box">
                      <img class="login_code" :src="codeImg" alt="" />
                    </div>
                  </template>
                </el-input>
              </div>
            </el-form-item>
            <el-button
              type="primary"
              class="login_btn mt40"
              style="width: 420px; height: 40px"
              @click="handleLogin"
              :loading="loading"
              ><span class="fs-20 font-bold">{{
                $t("login.立即登录")
              }}</span></el-button
            >
          </el-form>
        </div>
      </div>
      <div class="tips">欢迎使用Mira智慧餐饮系统</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Api from "@/config/api/api";
import Tools from "@/utils/tools";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const router = useRouter();
const ruleFormRef = ref();
const loading = ref(false);
const formData = ref({
  username: "",
});
const rules = ref({
  username: [
    { required: true, message: t("login.请输入用户名"), trigger: "blur" },
  ],
  password: [
    { required: true, message: t("login.请输入密码"), trigger: "blur" },
  ],
  code: [
    { required: true, message: t("login.请输入图形验证码"), trigger: "blur" },
  ],
});
const codeImg = ref("");
const uuid = ref("");
const handleLogin = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      Api.login({
        username: formData.value.username,
        password: Tools.rsaEncrypt(formData.value.password),
        code: formData.value.code,
        uuid: uuid.value,
      })
        .then(async (res) => {
          if (res?.data?.user?.loginType == 2) {
            ElMessage.error(t("login.当前账号为商户账号，请使用平台账号登录"));
            getAuthCode();
            return;
          }
          Storage.set("token", res?.data?.token, true);
          Storage.set("user", res?.data?.user, true);
          if (res?.status === 200) {
            getRoles(res?.data?.user?.user?.roles?.[0]?.id);
            const menuRes = await Api.getBuildMenu();
            menuRes.data.sort((a, b) => a.menuSort - b.menuSort);
            Storage.set("menus", menuRes.data || [], true);
            router.push(getFirstMenu(menuRes.data));
          } else {
            getAuthCode();
          }
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      getAuthCode();
    }
  });
};

const getAuthCode = async () => {
  try {
    const res = await Api.authCode({});
    codeImg.value = res?.data?.img || "";
    uuid.value = res?.data?.uuid || "";
  } catch (error) {
    console.log(error);
  }
};

const getFirstMenu = (menu) => {
  const f = (arr) => {
    if (arr?.[0]?.path) return arr?.[0]?.path;
    if (arr?.[0]?.children?.length) {
      return f(arr?.[0]?.children);
    }
  };
  return f(menu) || "";
};

const getRoles = (id) => {
  Api.getRoleInfo(id).then((res) => {
    if (res.status === 200) {
      Storage.set("roles", res?.data?.menus, true);
    }
  });
};

onMounted(() => {
  getAuthCode();
});
</script>

<style scoped lang="scss">
.login-container {
  background-image: url("@/assets/images/login/loginBg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .top-left-container {
    position: absolute;
    top: 40%;
    left: 120px;
    .top-left-title {
      font-size: 5vw;
      font-weight: 700;
    }
    .top-left-subtitle {
      font-size: 2.2vw;
      margin-top: 24px;
    }
  }

  .login-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 120px;
    .login-box {
      // width: 600px;
      // height: 672px;
      // background-image: url("@/assets/images/login/sld_login_left.png");
      // background-size: cover;
      // background-position: center;
      // background-repeat: no-repeat;
      position: relative;
      .right_bg {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        width: 600px;
        height: 440px;
        margin-left: -10px;
        padding: 55px 45px 22px;
        border-radius: 0 6px 6px 0;
        background: #fff;
      }
      .login_title {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: var(--primary-color);
        font-family: MicrosoftYaHei-Bold;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 2px;
      }

      :deep(.login_input) {
        height: 40px;
        border-radius: 2px;
        .el-input-group__append {
          padding: 0;
        }
      }
      .login_code {
        height: 40px;
        width: 96px;
      }
    }

    .tips{
      color: #7d8592;
      font-size: 16px;
      width: 600px;
      text-align: center;
      margin-top: 48px;
    }
  }
}
</style>
